<template>
  <div class="app">
    <ele-main
      @changeChecked="changeChecked"
      :list="leftList"
      @changeAllCk="changeAllCk"
    ></ele-main>
    <div class="EleButton">
    <button
      @click="changeList('right','left')"
      :disabled="rightListLength<=0"
    >
      ←</button
    ><button
      @click="changeList('left','right')"
      :disabled="leftListLength<=0"
    >
      →
    </button>
  </div>
    <ele-main
      @changeChecked="changeChecked"
      :list="rightList"
      @changeAllCk="changeAllCk"
    ></ele-main>
  </div>
</template>

<script>
import EleMain from "./components/EleMainTeacher";

export default {
  
  data() {
    return {
      list: [
        { id: 2, text: "备选项", positin:'right',disabled: false, checked: false },
        { id: 3, text: "备选项", positin:'right',disabled: true, checked: false },
        { id: 4, text: "备选项", positin:'right',disabled: false, checked: false },
        { id: 5, text: "备选项", positin:'right',disabled: false, checked: false },
        { id: 15, text: "备选项",positin:'right', disabled: true, checked: false },
        { id: 16, text: "备选项",positin:'left', disabled: false, checked: false },
        { id: 1, text: "备选项", positin:'left',disabled: false, checked: false },
        { id: 6, text: "备选项", positin:'left',disabled: false, checked: false },
        { id: 7, text: "备选项", positin:'left',disabled: true, checked: false },
        { id: 8, text: "备选项", positin:'left',disabled: false, checked: false },
        { id: 9, text: "备选项", positin:'left',disabled: true, checked: false },
        { id: 10, text: "备选项",positin:'left', disabled: false, checked: true },
        { id: 11, text: "备选项",positin:'left',disabled: false, checked: false },
        { id: 12, text: "备选项",positin:'left',disabled: false, checked: false },
        { id: 13, text: "备选项",positin:'left',disabled: true, checked: false },
        { id: 14, text: "备选项",positin:'left',disabled: false, checked: true },
      ],
      // listAll: this.leftList.concat(this.rightList),
    };
  },
  methods: {
    //获取父组件的全选框的值取反 
    changeAllCk(value,checked) {
       checked=!checked
      this.list.forEach((v) => {
        if (!v.disabled&&v.positin===value) {
            v.checked = checked;
        }
      });
    },

    // 根据id修改input的checked
    changeChecked(id) {
      //因为无法确定传回来的是那边的值，所以根据id的唯一性两边都进行判断，先进行左边数据的判断，返回-1说明该元素在右数据
      const index = this.list.findIndex((v) => v.id === id);
        this.list[index].checked = !this.list[index].checked;
    },

    //根据传回来的值进行判断，如果为>说明是，左边数据向右传递，定义一个数组接受左元素被选中的值，同时左元素进行过滤筛选出剩下的值用左元素接收，再让右元素与变量元素拼接，用右元素接收，如果为<则相反
    changeList(from,to) {
        this.list.forEach((v) =>{
          if(v.positin===from&&v.checked){
            v.checked=false
            v.positin=to
          }
        });
    },
  },

  computed: {
    leftList(){
      return this.list.filter(v=>v.positin==='left')
    },
    rightList(){
      return this.list.filter(v=>v.positin==='right')
    },
        leftListLength() {
      return this.leftList.filter((v) => v.checked === true).length ;
    },
    rightListLength() {
      return this.rightList.filter((v) => v.checked === true).length ;
    },
  },

  components: {
    EleMain,
  },

  beforeCreate() {
        this.color = 'bc-header-red';
        document.body.style.backgroundColor = '#f4f0dc';
    },
};
</script>

<style scoped>
.app {
  width: 800px;
  display: inline-flex;
  justify-content: center;
  margin: 200px 0 0 375px;
  background-color: #cbd3d6;
  align-items: center;
  height: 400px;
}

.EleButton{
  width: 240px;
    display: flex;
  justify-content: space-evenly;
}

button {
  width: 75px;
  height: 75px;
  color:#4c4c9a;
  background-color: #a4b7cf;
  border: none;
  transition: all 0.5s;
  border-radius: 15px;
  font-size: 35px;
  font-weight: 700;
}

button[disabled] {
  background-color: #bdc5c1;
  font-weight: 400;
  font-size: 20px;
  color: #bdcffa;
  cursor: not-allowed;
}
</style>